<template>
	<view class="wrap">
		<!-- <view class="top"></view> -->
		<view class="content">
			<view class="b-title">扫描行驶证识别增加信息</view>
			<view class="less-title">
				请拍摄行驶证正面，并将内容全部拍摄
				<br />
				请确保四角完整、亮度均匀、照片清晰
			</view>
			<u-loading style="position: absolute; left: 0; top: 30rpx" :show="vinUploading" size="36"></u-loading>
			<label style="display: flex,align-items: center;" :class="{ hideDel: car.state === 'verified' }">
				<u-upload
					:action="action"
					upload-text="点击上传"
					:file-list="fileList"
					:show-progress="false"
					@on-success="uploadVinSuccess"
					@on-uploaded="onVinUploaded"
					@on-remove="removeVinImage"
					@on-progress="onVinProgress"
					:max-count="1"
					:header="uploadHeader"
				></u-upload>
			</label>
			<!-- <label class="big-title">车主信息</label>
			<label class="u-border-bottom">
				<view class="tips">车主姓名</view>
				<input type="text" v-model="car.name" auto-complete placeholder="请填写车主姓名" />
			</label>
			<label class="u-border-bottom">
				<view class="tips">车主联系电话</view>
				<input type="number" v-model="car.mobile" placeholder="请输入手机号" />
			</label> -->
			<!-- <label class="big-title">车辆信息</label> -->
			<label class="u-border-bottom">
				<view class="tips">车辆品牌</view>
				<input style="flex: 1" type="text" v-model="car.car_brand" placeholder="请填写车辆品牌" />
			</label>
			<!-- 	<label class="u-border-bottom">
				<view class="tips">车辆车型</view>
				<input style="flex: 1" type="text" v-model="car.car_type" placeholder="请填写车辆车型" />
			</label> -->
			<label class="u-border-bottom">
				<view class="tips">车牌号码</view>
				<input type="text" v-model="car.plate_number" placeholder="请填写车牌号" />
			</label>
			<label class="u-border-bottom" style="margin-bottom: 0">
				<view class="tips">发动机号码</view>
				<input type="text" v-model="car.engine_number" placeholder="请填写发动机号码" />
			</label>
			<label class="u-border-bottom">
				<view class="tips">车架号 VIN</view>
				<input type="text" v-model="car.vin" placeholder="请填写车辆车架号" />
			</label>
			<view class="sm-font">
				<span>*请仔细确认上传资料，如资料上传错误可再次上传；资料上传有误，会影响产品功效承诺活动得权益。</span>
			</view>
			<view style="text-align: center; margin-bottom: 50rpx">
				<u-button style="display: block" @tap="submit" type="primary" shape="circle" size="medium">确认信息上传登记</u-button>
			</view>
		</view>
		<wx-share :title="shop.name" :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import install from '@/common/http.interceptor.js';
export default {
	data() {
		return {
			shop: {},
			user: {},
			selected: true,
			action: this.$baseUrl + '/user/upload-vehicle-license',
			fileList: [],
			frontImageList: [],
			dashboardImageList: [],
			uploadHeader: {
				Authorization: uni.getStorageSync('token') // 假设你的token存储在this.token中
			},
			smsTimer: 0,
			vinUploading: false, // 行驶证uploading
			frontUploading: false, // 正面照uploading
			dashboardUploading: false, // 仪表盘uploading,
			car: {}
		};
	},
	computed: {
		inputStyle() {
			let style = {};
			if (this.user.mobile) {
				style.color = '#fff';
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		}
	},
	onLoad() {
		this.getShop();
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		openAgreement() {
			if (this.shop.user_agreement_id) {
				return this.openPage('/pages/article/detail', { id: this.shop.user_agreement_id });
			}
			this.openPage('/pages/ucp/index');
		},
		openPrivacy() {
			if (this.shop.privacy_article_id) {
				return this.openPage('/pages/article/detail', { id: this.shop.privacy_article_id });
			}
			this.openPage('/pages/ucp/index');
		},
		// vin-image
		uploadVinSuccess(data, index, lists, name) {
			console.log(data);
			if (data.errcode == 200) {
				this.$u.toast('车辆资料填写完成');
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1500);
				this.car.vin_image = data.data.full_url;
			} else {
				this.$u.toast(data.message);
			}
		},
		removeVinImage(index, lists, name) {
			this.car.vin_image = '';
			this.fileList = [];
			console.log('sassssssssssssssssss', this.fileList);
			console.log('this.car.vin_image ', this.car.vin_image);
		},
		onVinProgress(res, index, lists, name) {
			this.vinUploading = true;
		},
		onVinUploaded(lists, name) {
			this.vinUploading = false;
		},
		//front-image
		uploadFrontSuccess(data, index, lists, name) {
			this.car.front_image = data.data.full_url;
		},
		removeFrontImage(index, lists, name) {
			this.car.front_image = '';
			this.frontImageList = [];
		},
		onFrontProgress(res, index, lists, name) {
			this.frontUploading = true;
		},
		onFrontUploaded(lists, name) {
			this.frontUploading = false;
		},
		//dashboard-image
		uploadDashboardSuccess(data, index, lists, name) {
			this.car.dashboard_image = data.data.full_url;
		},
		removeDashboardImage(index, lists, name) {
			this.car.dashboard_image = '';
			this.dashboardImageList = [];
		},
		onDashboardProgress(res, index, lists, name) {
			this.dashboardUploading = true;
		},
		onDashboardUploaded(lists, name) {
			this.dashboardUploading = false;
		},

		getSmsCode() {
			if (!this.user.mobile) {
				return this.$refs.uToast.show({
					type: 'error',
					icon: false,
					title: '请填写手机号',
					message: '手机号不能为空'
				});
			}
			if (this.smsTimer > 0) {
				return;
			}
			this.$u
				.post('/user/send-sms-code', { mobile: this.user.mobile })
				.then((res) => {
					console.log(res);
					this.smsTimer = 120;
					let ts = setInterval(() => {
						this.smsTimer--;
						if (this.smsTimer <= 0) {
							clearInterval(ts);
						}
					}, 1000);
				})
				.catch((e) => {
					console.log(e);
				});
		},
		submit() {
			console.log(this.car);
			// if (this.car.name.length === 0) {
			// 	return uni.$u.toast('请填写车主姓名');
			// }
			// if (this.car.mobile.length === 0) {
			// 	return uni.$u.toast('请填写车主联系电话');
			// }
			if (this.car.car_brand.length === 0) {
				return uni.$u.toast('请填写车辆品牌');
			}
			// if (this.car.car_type.length === 0) {
			// 	return uni.$u.toast('请填写车辆车型');
			// }
			if (this.car.plate_number.length === 0) {
				return uni.$u.toast('请填写车辆号码');
			}
			// if (this.car.mileage.length === 0) {
			// 	return uni.$u.toast('请填写车辆公里数');
			// }
			if (this.car.vin.length === 0) {
				return uni.$u.toast('请填写车辆车架号');
			}
			this.$u
				.post('/user/save-car-document', this.car)
				.then((res) => {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500);
				})
				.catch((e) => {
					console.log(e);
				});
		},
		switchTab(jumpURL) {
			uni.switchTab({
				url: jumpURL
			});
		},
		getUserInfo() {
			this.$u
				.post('/user/info', {})
				.then((res) => {
					this.user = res;
					if (res.car && res.car.id > 0) {
						this.car = res.car;
						this.car.car_brand = this.car.brand_info;
						if (res.car.phone_number && !res.car.mobile) {
							this.car.mobile = res.car.phone_number;
						}
						if (this.car.vin_image) {
							this.fileList = [];
							this.fileList.push({ url: this.car.vin_image });
						}
						// if (this.car.front_image) {
						// 	this.frontImageList.push({ url: this.car.front_image });
						// }
						// if (this.car.dashboard_image) {
						// 	this.dashboardImageList.push({ url: this.car.dashboard_image });
						// }
					}
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				})
				.catch((e) => {
					console.log(e);
				});
		},
		getShop() {
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					this.shop = res;
				})
				.catch((e) => {});
		},
		openPage(jumpURL, params = {}) {
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		uploadPic(e) {
			var form = e.target;
			var fileObj = form.files[0];
			var that = this;
			let reader = new FileReader();
			reader.onload = (evt) => {
				var base64 = evt.target.result;
				var image = new Image();
				image.onload = function () {
					let form = new FormData();
					form.append('file', fileObj);
					that._imgAjax(form);
				};
				image.src = base64;
				form.value = '';
			};
			reader.readAsDataURL(fileObj);
		},
		_imgAjax(form) {
			this.loading = true;
			$.ajax({
				type: 'POST',
				url: '/upload/image',
				data: form,
				dataType: 'json',
				cache: false,
				processData: false,
				contentType: false
			}).then((res) => {
				this.loading = false;
				if (res.code === 200 && res.data.full_url) {
					if (window.ws && window.ws.readyState === WebSocket.OPEN) {
						let data = { cmd: 'message.send', data: { to: this.friend.friend_uid, message: '$IMG$' + res.data.full_url, msg_id: new Date().getTime() } };
						window.ws.send(JSON.stringify(data));
					} else {
						alert('网终连接断开，请刷新页面再试');
					}
				} else {
					alert('图片发送失败');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.b-title {
	color: #197ed5;
	font-weight: bold;
	margin-bottom: 10rpx !important;
}
.less-title {
	font-size: 24rpx;
	color: #535353;
}
::v-deep .u-list-item {
	background: url('https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-519f518266396b132ac6e9b2fe4e502b.png') no-repeat center;
	background-size: 100%;
}
::v-deep .u-add-wrap {
	color: rgba(0, 0, 0, 0);
}
::v-deep .u-upload {
	width: 520rpx !important;
	height: 340rpx !important;
}
::v-deep .u-list-item,
::v-deep .u-preview-wrap {
	width: 520rpx !important;
	height: 340rpx !important;
}
.wrap {
	font-size: 28rpx;

	.content {
		width: 600rpx;
		margin: 30rpx 80rpx 0;

		.title {
			text-align: center;
			font-size: 48rpx;
			font-weight: 500;
			margin-bottom: 50rpx;
			img {
				max-width: 80%;
			}
		}

		label {
			display: flex;
			// border-bottom: 1px solid #dbdbdb;
			margin-bottom: 18rpx;
			padding: 18rpx 0;
		}

		input {
			text-align: left;
			// margin-bottom: 10rpx;
			// padding-bottom: 6rpx;
		}

		input[short] {
			width: 4em;
		}

		.tips {
			color: $u-type-info;
			// margin-bottom: 44rpx;
			// margin-top: 18rpx;
			color: #347caf;
			width: 7em;
		}
		.link-color {
			color: #195ed7;
		}

		.getCaptcha {
			background-color: #195ed7;
			color: $u-tips-color;
			color: #fff;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;

			&::after {
				border: none;
			}
		}

		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}

		.u-border-bottom::after {
			border-color: #9d9ea0;
		}

		uni-input {
			// padding-bottom:20rpx;
		}
		.sm-font {
			font-size: 0.9em;
			margin-bottom: 1em;
			line-height: 1.8;
		}
		.login-box {
			text-align: right;
			padding: 40rpx 0 50rpx 0;
		}
		.select-icon {
			height: 28rpx;
			display: inline-block;
			margin-right: 0.5em;
		}
	}

	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}

		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;

			.link {
				color: $u-type-warning;
			}
		}
	}
	.login-button {
		color: rgb(255, 255, 255);
		background-color: rgb(255, 153, 0);
	}
	.login-button[disabled] {
		background-color: gray;
	}
}
.big-title {
	color: #197ed5;
	font-weight: bold;
	margin-bottom: 0 !important;
}
::v-deep .hideDel .u-delete-icon {
	display: none;
}
</style>
